<template>
	<div id="box"></div>
</template>

<script>
import { Donut } from '@antv/g2plot'

export default {
	props: {
		ringObj: {
			type: Object
		}
	},
	data () {
		return {
			ringPlot: {}
		}
	},

	mounted () {
		this.drawDonut()
	},
	methods: {
		drawDonut ( data ) {
			this.ringPlot = new Donut( document.getElementById( 'box' ), {
				forceFit: true,
				title: {
					visible: true,
					text: '采集效率',
				},
				description: {
					visible: false,
					text: '检查数据采集效率',
				},
				radius: 0.8,
				padding: 'auto',
				data: [
					{ time: '0-30min', value: 0 },
					{ time: '30-120min', value: 0 },
					{ time: '>120min', value: 0 },
				],
				angleField: 'value',
				colorField: 'time',
				label: {
					visible: true,
					type: 'spider',
				},
				legend: {
					visible: true,
					position: 'top-left',
					flipPage: true,
					offestY: 30,
				},
			} );

			this.ringPlot.render();
		},
		rePaintChart ( data ) {
			console.log( data );
			// 重置图表
			this.ringPlot.updateConfig( {
				forceFit: true,
				title: {
					visible: true,
					text: '采集效率',
				},
				description: {
					visible: false,
					text: '检查数据采集效率',
				},
				radius: 0.8,
				padding: 'auto',
				data,
				angleField: 'value',
				colorField: 'time',
				label: {
					visible: true,
					type: 'spider',
				},
				legend: {
					visible: true,
					position: 'top-left',
					flipPage: true,
					offestY: 30,
				},
			} )
			this.ringPlot.render();

		}
	}
}
</script>

<style scoped lang="less">
</style>
